<script setup>
import {reactive, ref} from "vue";
import request from '@/utils/request'
import router from "@/router";
import {ElMessage} from "element-plus";
//表单引用
const reguserFormRef=ref()
//表单数据模型
const reguserForm=reactive({
  username:'',
  password:'',
  email:'',
  phone:''
})
// 表单的校验规则
const reguserRules = reactive({
  username: [
    { required: true, message: '必须填写账号', trigger: 'blur' },
    { min: 3, max:8, message: '账号长度为3-8', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '必须填写密码', trigger: 'blur' },
    /*{ min: 6, message: '账号长度至少8位', trigger: 'blur' },*/
    { pattern : /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/ ,
      message: '密码必须是数字和字母相结合，长度至少6位！',
      trigger: 'blur' },
  ],
  email:[
    {required:true,message:'必须填写邮箱',trigger:'blur'}
  ],
  phone:[
    {required:true,message:'必须填写电话',trigger:'blur'},
    {min:11,max:11,message: '请填写正确电话号码',trigger:'blur'}
  ]
})
//上一步按钮
const turnBtn=()=>{
  router.push('/')
}
//下一步按钮
const nextBtn = () => {
  reguserFormRef.value.validate((valid,fields)=>{
    if (valid){
      request({
        url:'sys/user/register',
        method:'POST',
        params:reguserForm,
      }).then(req=>{
        if (200==req.data.errorCode){
          ElMessage({
            type:'success',
            message:'注册成功！'
          })
          router.push('/')
        }else {
          ElMessage({
            type:'error',
            message:'注册失败！'
          })
        }
      })
    }
  })
  }
</script>

<template>
  <div class="bg">
  <div class="up">
    <el-row>
      <el-col :span="9" style="margin-top: 30px">
        <div class="up_first">账号安全中心 <el-divider direction="vertical" />
          <span class="up_second">注册账号</span>
        </div>
      </el-col>
      <el-col :span="8"></el-col>
      <el-col :span="7"></el-col>
    </el-row>
    <div class="el-form">
    <el-form
        ref="reguserFormRef"
        :model="reguserForm"
        :rules="reguserRules"
        style="margin-left: 40%">
      <el-form-item prop="username" label="账号">
        <el-input v-model="reguserForm.username"
                  style="width: 300px;
                height: 40px;
                font-weight: bolder;"
                  placeholder="请输入您的账号" />
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input v-model="reguserForm.password"
                  style="width: 300px;
                    height: 40px;
                    font-weight: bolder;"
                  placeholder="请输入您的密码"
                  show-password/>
      </el-form-item>
      <el-form-item prop="email" label="邮箱">
        <el-input v-model="reguserForm.email"
                  style="width: 300px;
                    height: 40px;
                    font-weight: bolder;"
                  placeholder="请输入您的邮箱" />
      </el-form-item>
      <el-form-item prop="phone" label="电话">
        <el-input v-model="reguserForm.phone"
                  style="width: 300px;
                    height: 40px;
                    font-weight: bolder;"
                  placeholder="请输入您的电话" />
      </el-form-item>
    </el-form>
    </div>
    <div style="margin-top: 30px">
      <el-button
          style="width: 150px;
          height: 40px;
          margin-left:90px;"
          type="primary"
          @click="turnBtn">
        上一步
      </el-button>
      <el-button
          style="width: 150px;
          height: 40px;
          margin-left:90px;"
          type="primary"
          @click="nextBtn">
        注册
      </el-button>
    </div>
  </div>
  </div>
</template>

<style scoped>
.bg {
  width: 100%;
  height: 100%;
  background-image: url("../assets/imgs/bgimg.jpg");
  background-size: cover; /* 使图片平铺满整个浏览器（从宽和高的最大需求方面来满足，会使某些部分无法显示在区域中） */
  position: absolute; /* 不可缺少 */
  z-index: -1;
  background-repeat: no-repeat;
}
.up_first{
  font-size: 25px;
  font-weight: bolder;
}
.up_second{
  font-size: 20px;
}
.el-form{
  margin-top: 150px;
}
</style>